@{
<link href="${ctxPath}/static/backend/resetPass.css" rel="stylesheet">
<link href="${ctxPath}/static/libs/hisui/css/hisui.min.css" rel="stylesheet">
<script type="text/javascript" src="${ctxPath}/static/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/libs/jquery-easing/jquery.easing.min.js"></script>
<script src="${ctxPath}/static/libs/hisui/js/jquery.hisui.min.js"></script>
<script src="${ctxPath}/static/libs/layer/layer.js"></script>
<script src="${ctxPath}/static/libs/jquery-form/jquery.form.js"></script>
<script src="${ctxPath}/static/libs/jquery-i18n-properties/jquery.i18n.properties.min.js"></script>
<script src="${ctxPath}/static/common/js/Sys.js"></script>
<form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">填写账号</li>
        <li>身份验证</li>
        <li>修改密码</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
        <h2 class="fs-title">填写账号</h2>
        <h3 class="fs-subtitle">填入要重置密码的账号</h3>
        <input type="text" id="userCode" name="userCode" placeholder="请输入账户名"/>
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" type="text" id="kaptcha_input" name="kaptcha" placeholder="验证码"
                       required="">
                <div class="input-group-addon" title="点击更换验证码">
                    <img src="${ctxPath}/kaptcha" id="kaptcha"/>
                </div>
            </div>
        </div>
        <input type="button" name="authUser" id="authUser" class="next action-button" value="继续"/>
    </fieldset>
    <fieldset>
        <h2 class="fs-title">身份验证</h2>
        <h3 class="fs-subtitle">填入手机验证码验证身份</h3>
        <input type="text" name="vcode" id ="vcode" placeholder="请输入手机上收到的验证码"/>
        <input type="button" id="verifyCode" name="verifyCode" class="next action-button" value="继续"/>
    </fieldset>
    <fieldset>
        <h2 class="fs-title">修改密码</h2>
        <h3 class="fs-subtitle">填入新的密码</h3>
        <input type="password" name="newPass" placeholder="请填入新的密码"/>
        <input type="password" name="confirmPass" placeholder="再次填入密码"/>
        <input type="button" name="submit" class="submit action-button" value="提交"/>
    </fieldset>
</form>
<script>
    //jQuery time
    var current_fs, next_fs, previous_fs; //fieldsets
    var left, opacity, scale; //fieldset properties which we will animate
    var animating; //flag to prevent quick multi-click glitches
    $('#kaptcha').click(function () {
        var url = "${ctxPath}/kaptcha?s=" + Math.random();
        $("#kaptcha").attr("src", url);
    });
    //校验账户  是否有效账户或是否存在该账户
    $("#authUser").click(function () {
        var userCode = $("#userCode").val();
        var kaptcha = $("#kaptcha_input").val();
        if(userCode!=""&&kaptcha!=""){
            Sys.ajax(Sys.backendPath+"/getVcode",{"userCode":userCode,"kaptcha":kaptcha},function (res) {
                Sys.success("手机短信验证码已发送，请注意查收！");
                goNext($("#authUser"));
            },function (res) {
                Sys.error("验证码错误，或该账户不存在，请确认信息是否正确！");
            },"json",true,"账户校验中....");
        }else{
            Sys.warn("请补全未填写的内容或项目！");
        }
    });
    //校验手机验证码
    $("#verifyCode").click(function () {
        var vcode = $("#vcode").val();
        if(vcode!=""){
            Sys.ajax(Sys.backendPath+"/verifyCode",{"vcode":vcode},function (res) {
                goNext($("#verifyCode"));
            },function (res) {
                Sys.error("验证码错误！");
            },"json",true,"校验中....");
        }else{
            Sys.warn("请将手机上收到的短信验证码填入！");
        }
    });
    //提交修改密码
    $(".submit").click(function () {
        var newPass =$("#newPass").val();
        var confirmPass =$("#confirmPass").val();
        if(newPass!=""&&confirmPass!=""&&newPass==confirmPass){
            Sys.ajaxForm("msform",Sys.backendPath+"/resetPass",function (res) {
                Sys.success("密码修改成功！");
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            },function (res) {
                Sys.error("密码修改失败，请联系管理员进行协调！");
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });
        }else{
            Sys.warn("请检查两次密码输入是否一致！");
        }
    });
    function goNext(obj){
        if (animating) return false;
        animating = true;

        current_fs = obj.parent();
        next_fs = obj.parent().next();

        //activate next step on progressbar using the index of next_fs
        $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

        //show the next fieldset
        next_fs.show();
        //hide the current fieldset with style
        current_fs.animate({opacity: 0}, {
            step: function (now, mx) {
                //as the opacity of current_fs reduces to 0 - stored in "now"
                //1. scale current_fs down to 80%
                scale = 1 - (1 - now) * 0.2;
                //2. bring next_fs from the right(50%)
                left = (now * 50) + "%";
                //3. increase opacity of next_fs to 1 as it moves in
                opacity = 1 - now;
                current_fs.css({'transform': 'scale(' + scale + ')'});
                next_fs.css({'left': left, 'opacity': opacity});
            },
            duration: 800,
            complete: function () {
                current_fs.hide();
                animating = false;
            },
            //this comes from the custom easing plugin
            easing: 'easeInOutBack'
        });
    }
</script>
@}